<!--
作者：qzy
时间：20221029
说明：此组件为添加教学任务下的学生弹出框
-->
<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      title="添加学生"
      width="75%"
    >
<!--      搜索框组件-->
      <ClassSearch
        :handleSizeChange="handleSizeChange"
        :handleCurrentChange="handleCurrentChange"
        @getStudents="getStudents"
        :page="searchData.page"
        :pageSize-="searchData.pageSize"
      />
<!--      表格区域-->
      <div class="table">
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          border="true"
          style="width: 100%"
          height="450"
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{background:'#f4fcff',color:'#2f2f2f', textAlign: 'center'}"
          scrollbar-always-on="true"
          @selection-change="handleSelectionChange"
        >
          <el-table-column width="40" type="selection"/>
          <el-table-column prop="studentNumber" label="学号" width="130"/>
          <el-table-column prop="name" label="姓名" width="100"/>
          <el-table-column prop="schoolDepartment.name" label="院系"/>
          <el-table-column prop="schoolMajor.name" label="专业" width="100"/>
          <el-table-column prop="schoolGrade.name" label="年级" width="100"/>
          <el-table-column prop="schoolClass.name" label="行政班级" width="100"/>
          <el-table-column prop="sex" label="性别" width="100">
            <template #default="scope">
              <span v-if="scope.row.sex === 0">保密</span>
              <span v-if="scope.row.sex === 1">男</span>
              <span v-if="scope.row.sex === 2">女</span>
            </template>
          </el-table-column>
          <el-table-column prop="tel" label="手机号" width="200"/>
        </el-table>
      </div>
<!--      分页与操作按钮-->
      <div class="operation">
<!--        分页-->
        <div class="pagination">
          <el-pagination
            class="el-pagination"
            v-model:currentPage="searchData.page"
            v-model:page-size="searchData.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
<!--        操作按钮-->
        <div class="footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="addStudents">添加</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script lang='ts' setup>
import ClassSearch from '@/views/page/tearchertack/mycourse/details/teachingdetails/studentmanage/student/ClassSearch.vue';
import {
  ref, defineExpose, getCurrentInstance, defineEmits,
} from 'vue';
import { ElMessage, ElTable } from 'element-plus';
import Request from '@/api/request/request';

const { proxy } = getCurrentInstance();
const emit = defineEmits(['getStudentList']);

const dialogVisible = ref(false); // 弹框按钮
const total = ref(); // 总数据数
const studentIds = ref([]);// 选中的学生id集合
const multipleTableRef = ref<InstanceType<typeof ElTable>>(); // 消除el多选框
const teachingTaskId = sessionStorage.getItem('teachingTaskId'); // 当前教学任务id
const searchData = ref({ // 要查询的数据表单
  departmentId: '',
  majorIds: '',
  gradeId: '',
  classIds: '',
  name: '',
  pageSize: 10,
  page: 1,
});
// 获取添加页面的表格初始化数据
const tableData = ref();
const getStudentList = async () => {
  let resData:any = await new Request(proxy.$urls.API_URL_BACKSTAGE_SCHOOLSTUDENT_MANAGE, null, {
    params: {
      departmentId: searchData.value.departmentId,
      majorIds: searchData.value.majorIds,
      gradeId: searchData.value.gradeId,
      classIds: searchData.value.classIds,
      name: searchData.value.name,
      pageSize: searchData.value.pageSize,
      page: searchData.value.page,
    },
  }).get();
  if (resData.success) {
    tableData.value = resData.data.data;
    total.value = resData.data.totalRecords;
  }
};

// 当改变表格每页多少记录数时调用
const handleSizeChange = (val: number) => {
  searchData.value.pageSize = val;
  getStudentList();
};

// 当改变页数时调用
const handleCurrentChange = (val: number) => {
  searchData.value.page = val;
  getStudentList();
};

// 接收子组件搜索获得的学生数据集合，赋予当前页面的表格数据渲染
const getStudents = async (search:any) => {
  searchData.value = search;
  await getStudentList();
};

// element表格多选
const handleSelectionChange = (val:any) => {
  studentIds.value = val;
  JSON.parse(JSON.stringify(studentIds.value));
};
// 添加学生到教学班
const addStudents = async () => {
  const list = studentIds.value.map((item:any) => item.id);
  let result:any = await new Request(proxy.$urls.API_URL_BACKSTAGE_SCHOOLTEACHINGTASKSTUDENT_MANAGE, {
    teachingTaskId,
    studentIds: list,
  }).post();
  if (result.success) {
    ElMessage.success('添加成功');
    // 添加成功后，去除表格的多选状态
    multipleTableRef.value!.clearSelection();
    emit('getStudentList');
  }
};

// 打开弹出框点击事件，主要是暴露给父组件调用，在父组件调用时，再查询初始学生数据
const openDialog = () => {
  dialogVisible.value = true;
  getStudentList();
};
// 暴露给父组件使用
defineExpose({
  openDialog,
});
</script>

<style lang="scss" scoped>
.table {
  margin-top: 20px;
}
.operation {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
